<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h1 {
            text-align: center;
            margin: 10px;
            color: #336699;
        }

        .container {

            width: 1440px;
            height: auto;
            margin: 10px auto;
            text-align: center;
        }

        .catalog {
            margin: 0px auto;
            width: 80%;
            display: flex;
            text-align: center;
            border: 1px solid #FCFCFC;
            justify-content: center;

        }

        .catalog div {
            width: 100px;
            height: 40px;
            border: 1px solid #ccc;
            border-radius: 5px;
            line-height: 40px;
            cursor: pointer;
            margin: 5px;
        }

        /*
        .catalog div {
            background: lightskyblue;
        }*/

        .is_active {
            background: lightskyblue;
        }

        .items_list {
            width: 80%;
            margin: 20px auto;
            display: flex;
            justify-content: space-around;
            flex-flow: row wrap;
        }

        .items_list .item {
            width: 250px;
            height: 250px;
            cursor: pointer;
            padding: 10px 10px 30px 10px;
        }


        dl dd {
            text-align: left;
            padding-left: 5px;
            margin-top: 5px;
            padding-bottom: 5px;
            color: #666;
            font-size: x-small;
        }

        dl dt img:hover {
            transform: scale(1.01, 1.01);
            box-shadow: 0 5px 12px #e4e6e7;
            cursor: pointer;
        }

        .pager {
            width: 80%;
            margin: 10px auto;
            text-align: center;
            display: flex;
            justify-content: center;
        }

        .pager div {
            width: 20px;
            height: 20px;
            padding: 4px;
            margin: 5px;
            line-height: 20px;
            text-align: center;
            border: 1px solid #ccc;
            cursor: pointer;
            background: #3399FF;
            color: #fff;
        }

        .footer-copyright {
            width: 80%;
            margin: 20px auto;
            text-align: center;
        }

        .footer-copyright hr {
            margin-bottom: 20px;
        }

    </style>
</head>
<body>
<h1>商品列表</h1>
<hr>

<div class="container">
    <div class="catalog" id="catalogList">
        <!--
        <div>首页</div>
        -->

    </div>

    <div class="items_list" id="itemsList">
        <!--
        <dl class="item">
            <dt><img src="images/items_logo.jpg"></dt>
            <dd>小米静音鼠标&nbsp;&nbsp;<span>20.0</span>￥&nbsp;&nbsp;<span>销量：100</span></dd>
        </dl>

        <dl class="item">
            <dt><img src="images/items_logo.jpg"></dt>
            <dd>小米静音鼠标&nbsp;&nbsp;<span>20.0</span>￥&nbsp;&nbsp;<span>销量：100</span></dd>
        </dl>
        <dl class="item">
            <dt><img src="images/items_logo.jpg"></dt>
            <dd>小米静音鼠标&nbsp;&nbsp;<span>20.0</span>￥&nbsp;&nbsp;<span>销量：100</span></dd>
        </dl>
        <dl class="item">
            <dt><img src="images/items_logo.jpg"></dt>
            <dd>小米静音鼠标&nbsp;&nbsp;<span>20.0</span>￥&nbsp;&nbsp;<span>销量：100</span></dd>
        </dl>
        <dl class="item">
            <dt><img src="images/items_logo.jpg"></dt>
            <dd>小米静音鼠标&nbsp;&nbsp;<span>20.0</span>￥&nbsp;&nbsp;<span>销量：100</span></dd>
        </dl>
        <dl class="item">
            <dt><img src="images/items_logo.jpg"></dt>
            <dd>小米静音鼠标&nbsp;&nbsp;<span>20.0</span>￥&nbsp;&nbsp;<span>销量：100</span></dd>
        </dl>
        <dl class="item">
            <dt><img src="images/items_logo.jpg"></dt>
            <dd>小米静音鼠标&nbsp;&nbsp;<span>20.0</span>￥&nbsp;&nbsp;<span>销量：100</span></dd>
        </dl>
        <dl class="item">
            <dt><img src="images/items_logo.jpg"></dt>
            <dd>小米静音鼠标&nbsp;&nbsp;<span>20.0</span>￥&nbsp;&nbsp;<span>销量：100</span></dd>
        </dl>

        <dl class="item">
            <dt><img src="images/items_logo.jpg"></dt>
            <dd>小米静音鼠标&nbsp;&nbsp;<span>20.0</span>￥&nbsp;&nbsp;<span>销量：100</span></dd>
        </dl>
        <dl class="item">
            <dt><img src="images/items_logo.jpg"></dt>
            <dd>小米静音鼠标&nbsp;&nbsp;<span>20.0</span>￥&nbsp;&nbsp;<span>销量：100</span></dd>
        </dl>
        <dl class="item">
            <dt><img src="images/items_logo.jpg"></dt>
            <dd>小米静音鼠标 &nbsp;&nbsp;<span>20.0</span>￥&nbsp;&nbsp;<span>销量：100</span></dd>
        </dl>
        <dl class="item">
            <dt><img src="images/items_logo.jpg"></dt>
            <dd>小米静音鼠标 &nbsp;&nbsp;<span>20.0</span>￥&nbsp;&nbsp;<span>销量：100</span></dd>
        </dl>
        -->
    </div>

    <div class="pager">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>

    <div class="footer-copyright">
        <div id="hostDiv" style="margin: 0 auto;text-align: center">
            当前的服务器信息是：<span id="hostinfo"></span>
        </div>
        <hr>
        Copyright <span>&copy;</span> 2017-2023 华清远见
        All Rights Reserved.
        <a href="http://beian.miit.gov.cn/">京ICP备18024677号-1</a>&nbsp;&nbsp; <a
            href="#">作者：西蒙牛</a>
    </div>
</div>

<!--使用CDN添加jQuery类库-->
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
<script>

    let catalogList = []; //类别集合
    let goodsList = []; //这个页面要显示的商品集合

    //判断一下浏览器缓存中是否已经保存过商品列表类别。
    if (sessionStorage.getItem("catalogList") == null) {
        $.ajax({
            url: 'catalog/',
            type: 'GET',
            dataType: 'json',
            success: (resp) => {
                console.log(resp);
                if (resp.code === 200) {
                    catalogList = resp.data;
                    //保存到浏览器缓存中。
                    sessionStorage.setItem("catalogList", JSON.stringify(catalogList));
                    catalogList = JSON.parse(sessionStorage.getItem("catalogList"));
                    console.log("-------------当前浏览器缓存中保存的类别类表是：----------------");
                    console.log(catalogList);
                }
            },
            err: (err) => {
                console.log(err);
            }
        })
    } else {
        //从浏览器缓存中取出类别类列表
        catalogList = JSON.parse(sessionStorage.getItem("catalogList"));

        console.log("-------------当前浏览器缓存中保存的类别类表是：----------------");
        console.log(catalogList);
    }

    window.onload = initCatalogList('all');

    queryCatalogList('all'); //默认显示所有的商品资料；
    function initCatalogList(catalogName) {
        let html = "";
        $("#catalogList").empty(); //清空所有的子节点。
        //$("#catalog").append("<div onclick='queryCatalogList(all)'>全部</div>")
        if (catalogName === 'all') {
            html += "<div class='is_active' onclick='queryCatalogList(\"all\")'>全部</div>";
        } else {
            html += "<div onclick='queryCatalogList(\"all\")'>全部</div>";
        }
        for (let i = 0; i < catalogList.length; i++) {
            if (catalogName === catalogList[i].name) {
                html += "<div class='is_active' onclick=queryCatalogList(\"" + catalogList[i].name + "\")>" + catalogList[i].name + "</div>";
            } else {
                html += "<div onclick=queryCatalogList(\"" + catalogList[i].name + "\")>" + catalogList[i].name + "</div>"
            }
        }

        $("#catalogList").html(html);



    }

    function queryCatalogList(catalogName) {
        console.log("接受到的类别名称：" + catalogName);
        //发送一个异步请求；
        let ajaxUrl = "";
        if (catalogName === 'all') {
            ajaxUrl = "goods/all";
        } else {
            //改为调用gateway的接口，观察使用使用了负载均衡。
            //ajaxUrl = "goods/query/" + catalogName;  //用的是provider自己的接口
            //必须使用绝对地址了。
            ajaxUrl =  'http://localhost:5000/consumer/consumerdemo/items/catalog?catalogName='+catalogName
        }

        $.ajax({
            url: ajaxUrl,
            type: 'GET',
            dataType: 'json',
            success: (resp) => {
                console.log(resp);
                if (resp.code === 200) {
                    goodsList = []; //把原来的goodsList也清空一下。
                    goodsList = resp.data;
                    //动态绘制页面
                    let html = "";
                    $("#itemsList").empty();
                    for (let i = 0; i < goodsList.length; i++) {


                        html += "<dl class=\"item\">\n" +
                            "            <dt><img src=\"" + goodsList[i].pic + "\"></dt>\n" +
                            "            <dd>" + goodsList[i].name + "&nbsp;&nbsp;<span>" + goodsList[i].price + "</span>￥&nbsp;&nbsp;<span>销量：100</span></dd>\n" +
                            "        </dl>";

                    }
                    $("#itemsList").html(html);

                    initCatalogList(catalogName);

                    $("#hostinfo").text(resp.host);
                }
            },
            err: (err) => {
                console.log(err);
            }
        })
    }

</script>

</body>
</html>
